<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="<%= blog.description %>" />
    <meta name="keywords" content="<%= blog.keywords %>" />
    <meta name="baidu-site-verification" content="H91h9G7RRd" />
    <meta name="author" content="shixtao" />
    <link
      href="/public/ueditor/third-party/highlight/styles/atom-one-dark.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/home/css/bootstrap.css" />
    <link rel="stylesheet" href="/public/home/css/style.css" />
    <link rel="shortcut icon" href="/public/home/images/favicon.ico" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1611091_sf4ghg5ts0i.css"
    />
    <!--[if lt IE 10]>
      <p style="text-align: center; color: red">
        您的浏览器版本过低，请使用更高版本的浏览器来获取更好的体验！ 使用<a
          href="http://www.google.cn/intl/zh-CN/chrome/"
          target="_blank"
          >Google Chrome</a
        >
      </p>
    <![endif]-->
    <title><%= blog.title %></title>
  </head>

  <body>
    <%- include('./public/header.html') %>
    <div class="main-wrapper">
      <div class="theme-bg-light" style="border-top-left-radius: 20px">
        <article class="blog-post px-3 py-5 p-md-5">
          <div class="container">
            <header class="blog-post-header">
              <h2 class="title mb-2">
                <b><%= blog.title %></b>
              </h2>
              <div class="meta mb-3">
                <i class="iconfont icon-bokeyuan"></i>
                <span title="博客类型"
                  ><%= blog.type %>&nbsp;
                  <span title="博客分类">
                    <a class="text-info" href="/list?cid=<%= blog.cid %>"
                      ><%= list.name %></a
                    >
                  </span>
                </span>
                <i class="iconfont icon-shizhong"></i>
                <span title="发表时间"><%= blog.time %></span>
                <i class="iconfont icon-renyuan"></i>
                <span title="博客作者"><%= blog.author %></span>
                <i class="iconfont icon-pinglun"></i>
                <span title="评论"
                  ><a href="#form" id="comment_count"
                    ><span><%= blog.comment %></span>评论</a
                  ></span
                >
                <i class="iconfont icon-liulan"></i>
                <span title="浏览量"><%= blog.click %></span>
              </div>
            </header>
            <!-- 内容区 -->
            <div class="blog-post-body"><%- blog.content %></div>
            <!-- 评论区编辑区 -->
            <% if(+blog.comment_status === 0 ){ %>
            <h4 class="comment">评论区</h4>
            <form id="form">
              <fieldset>
                <div class="form-group">
                  <label
                    >输入大名：<input
                      type="text"
                      required
                      name="name"
                      maxlength="6"
                      id="name"
                  /></label>
                  <label
                    >选择头像：
                    <select
                      name="face"
                      onchange="document.images['face'].src=options[selectedIndex].value;"
                    >
                      <% for (let i = 1; i <= 8;i++) { %>
                      <option value="/public/home/images/p<%= i %>.png">
                        头像<%= i %>
                      </option>
                      <% } %>
                    </select>
                  </label>
                  <span
                    ><img
                      src="/public/home/images/p1.png"
                      id="face"
                      class="face"
                      alt="face"
                      width="50"
                      height="50"
                  /></span>
                  <textarea
                    name="comment"
                    rows="3"
                    class="form-control"
                    id="form-control"
                    maxlength="50"
                    placeholder="欢迎您留下宝贵的意见"
                  ></textarea>
                  <div class="emoji_box">
                    <% emoji.forEach(item => { %>
                    <span class="comment_emoji_item"><%= item %></span>
                    <% }) %>
                  </div>
                  <img
                    src="/public/home/images/笑脸.png"
                    alt="笑脸icon"
                    class="comment_smile_icon"
                  />
                </div>
                <button type="submit" class="btn btn-primary" id="blog-btn">
                  提交
                </button>
                <br /><br />
              </fieldset>
            </form>
            <!-- 评论展示区 -->
            <table class="table">
              <tbody>
                <% comments.forEach(comment => { %>
                <tr>
                  <td>
                    <div class="touxiang">
                      <img
                        src="<%= comment.face %>"
                        alt="人物头像"
                        width="50"
                        height="50"
                      />
                      <div><%= comment.name %></div>
                    </div>
                    <div class="content">
                      <%= comment.content %>
                      <br />
                      <small><%= comment.time %></small>
                    </div>
                    <div class="floor">
                      <p onclick="alert('请联系作者！')">
                        <span style="cursor: pointer">举报</span>
                      </p>
                      <p>
                        <a
                          href="#<%= comment.id %>"
                          onclick="reply('<%= comment.id %>','<%= comment.id %>','<%= comment.name %>')"
                          >回复</a
                        >
                      </p>
                    </div>
                    <form id="<%= comment.id %>" style="display: none">
                      <fieldset>
                        <div class="form-group">
                          <label
                            >输入大名：<input type="text" required maxlength="6"
                          /></label>
                          <label
                            >选择头像：
                            <select
                              name="face"
                              onchange="document.images['<%= comment.id %>replyface'].src=options[selectedIndex].value;"
                            >
                              <% for (let i = 1; i <= 8;i++) { %>
                              <option value="/public/home/images/p<%= i %>.png">
                                头像<%= i %>
                              </option>
                              <% } %>
                            </select>
                          </label>
                          <span
                            ><img
                              src="/public/home/images/p1.png"
                              class="face"
                              alt="face"
                              width="50"
                              height="50"
                              id="<%= comment.id %>replyface"
                          /></span>
                          <textarea
                            rows="3"
                            class="form-control"
                            maxlength="50"
                            placeholder="回复区"
                          ></textarea>
                          <div class="emoji_box">
                            <% emoji.forEach(item => { %>
                            <span class="reply_emoji_item"><%= item %></span>
                            <% }) %>
                          </div>
                          <img
                            src="/public/home/images/笑脸.png"
                            alt="笑脸icon"
                            class="reply_smile_icon"
                          />
                        </div>
                        <button type="submit" class="btn btn-primary">
                          回复
                        </button>
                        <br /><br />
                      </fieldset>
                    </form>
                    <% replies.forEach(reply => { %> <% if(comment.id ===
                    reply.reply_id ) { %>
                    <div class="hf">
                      <div class="reply_area">
                        <span class="reply_info">
                          <img
                            src="<%= reply.face %>"
                            alt="人物头像"
                            width="50"
                            height="50"
                          />
                          <span
                            ><%= reply.name %><span class="text-info"
                              >&nbsp;回复&nbsp;</span
                            ><span><%= reply.reply_name %></span>:</span
                          >
                          </span>
                        <span class="reply_content">
                          <%= reply.content %><br />
                          <small><%= reply.time %></small>
                        </span>
                        <span style="float: right">
                          <p
                            onclick="alert('请联系作者！')"
                          >
                          <span style="cursor: pointer">举报</span>
                          </p>
                          <p>
                            <a
                              href="#<%= reply.id %>"
                              onclick="reply('<%= reply.id %>','<%= comment.id %>','<%= reply.name %>')"
                              >回复</a
                            >
                          </p>
                        </span>
                        <div class="replyedit">
                          <form id="<%= reply.id %>" style="display: none">
                            <fieldset>
                              <div class="form-group">
                                <label
                                  >输入大名：<input
                                    type="text"
                                    required
                                    id="<%= reply.id %>name"
                                    maxlength="6"
                                /></label>
                                <label
                                  >选择头像：
                                  <select
                                    name="face"
                                    id="<%= reply.id %>replyface"
                                    onchange="document.images['<%= reply.id %>replyface'].src=options[selectedIndex].value;"
                                  >
                                    <% for (let i = 1; i <= 8;i++) { %>
                                    <option value="/public/home/images/p<%= i %>.png">头像<%= i %></option>
                                    <% } %>
                                  </select>
                                </label>
                                <span
                                  ><img
                                    src="/public/home/images/p1.png"
                                    class="face"
                                    id="<%= reply.id %>replyface"
                                    alt="face"
                                    width="50"
                                    height="50"
                                /></span>
                                <textarea
                                  id="<%= reply.id %>reply"
                                  rows="3"
                                  class="form-control"
                                  maxlength="50"
                                  placeholder="回复区"
                                ></textarea>
                                <div class="emoji_box">
                                  <% emoji.forEach(item => { %>
                                  <span class="reply_emoji_item2"
                                    ><%= item %></span
                                  >
                                  <% }) %>
                                </div>
                                <img
                                  src="/public/home/images/笑脸.png"
                                  alt="笑脸icon"
                                  class="reply_smile_icon2"
                                />
                              </div>
                              <button type="submit" class="btn btn-primary">
                                回复
                              </button>
                              <br /><br />
                            </fieldset>
                          </form>
                        </div>
                      </div>
                    </div>
                    <% } %> <% }) %>
                  </td>
                </tr>
                <% }) %>
              </tbody>
            </table>
            <% } else { %>
            <h4 class="comment">抱歉，评论功能已关闭！</h4>
            <% } %>
          </div>
        </article>
      </div>
      <%- include('./public/footer.html') %>
    </div>
    <%- include('./public/color.html') %>
    <div
      class="toast"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-delay="2000"
    >
      <div class="toast-header">
        <strong class="mr-auto">通知</strong>
        <button
          type="button"
          class="ml-2 mb-1 close"
          data-dismiss="toast"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">评论成功！</div>
    </div>
    <%- include('./public/script.html') %>
    <script src="/public/ueditor/third-party/highlight/highlight.pack.js"></script>
    <script>
      // 代码高亮
      hljs.initHighlightingOnLoad();
      var allpre = document.querySelectorAll('pre');
      for (var i = 0; i < allpre.length; i++) {
        var onepre = document.querySelectorAll('pre')[i];
        var mycode = document.querySelectorAll('pre')[i].innerHTML;
        onepre.innerHTML = '<code id="mycode">' + mycode + '</code>';
      }
    </script>
  </body>
</html>
